<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增会员</title>
    <link rel="stylesheet" href="/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/style.css">
    <script src="/static/common/layui/layui.js"></script>
    <script src="/static/common/jquery-3.3.1.min.js"></script>
    <script src="/static/common/vue.min.js"></script>
    <%--    获取系统时间--%>
    <script>
        window.onload = function(){
            function getDate(){
                var today = new Date();
                var date;
                date = (today.getFullYear()) +"-" + (today.getMonth() + 1 ) + "-" + today.getDate() ;
                return date;
            }
        }


        //表单验证
        // 验证身份证号
        function checkIdCard(){
            let idCard = $("[name='card']").val();
            let regex = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
            if(regex.test(idCard)){
                // 隐藏错误信息
                $("[name='card']").next("span").text("");
                return true;
            } else {
                $("[name='card']").next("span").text("请填写正确的身份证号");
                return false;
            }
        }

        // 验证手机号
        function checkPhone(){
            let phone = $("[name='phone']").val();
            let regex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
            if(regex.test(phone)){
                // 隐藏错误信息
                $("[name='phone']").next("span").text("");
                return true;
            } else {
                $("[name='phone']").next("span").text("请填写正确的手机号");
                return false;
            }
        }

        // 验证时间
        function checkDate(){
            let startTime = $("[name='startTime']").val();
            let endTime = $("[name='endTime']").val();
            if(startTime > endTime){
                $("[name='endTime']").next("span").text("到期时间不能小于开通时间");
                return false;
            } else {
                $("[name='endTime']").next("span").text("");
                return true;
            }
        }

        // 验证性别
        function checkSex() {
            let sex = $("[name='sex']").val();
            if(sex === "#" || sex === "" || sex === null) {
                $("#error_sex").text("请选择性别");
                return false;
            } else {
                $("#error_sex").text("");
                return true;
            }
        }

        // 验证会员类型
        function checkV_type() {
            let v_type = $("[name='v_type']").val();
            if(v_type === "#" || v_type === "" || v_type === null) {
                $("#error_type").text("请选择会员类型");
                return false;
            } else {
                $("#error_type").text("");
                return true;
            }
        }

        // 验证所有条件
        function ckAll(){
            return checkSex() && checkIdCard() && checkPhone() && checkV_type() && checkDate();
        }

    </script>
</head>
<body>
<div id="app">
    <!--顶栏-->
    <%@include file="/views/top.jsp"%>

    <div class="main">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>新增会员</legend>
            </fieldset>


            <form class="layui-form " action="/vip?action=add" method="post" onsubmit="return ckAll()">

                <%-- 请求路径的两种写法，使用隐藏域以后，表单的 action可不带参数，即 action="/vip" --%>
                <!-- 隐藏域藏值 -->
                <%--<input type="hidden" name="action" value="add"/>--%>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="${requestScope.vip.name}" required  placeholder="请输入姓名" autocomplete="off" class="layui-input" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select name="sex" class="layui-input" autocomplete="off" required >
                            <option value="#"></option>
                            <option value="1" ${requestScope.vip.sex == 1 ? 'selected' : ''}>男</option>
                            <option value="0" ${requestScope.vip.sex == 0 ? 'selected' : ''}>女</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="card" value="${requestScope.vip.card}" onblur="checkIdCard()" required placeholder="请填写身份证号" autocomplete="off" class="layui-input">
                        <span style="color: red">${requestScope.errorCard}</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" value="${requestScope.vip.phone}" onblur="checkPhone()" required placeholder="请填写手机号" autocomplete="off" class="layui-input">
                        <span style="color: red">${requestScope.errorPhone}</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">会员类型</label>
                    <div class="layui-input-block">
                        <select name="v_type" class="layui-input" autocomplete="off" required >
                            <option value="#"></option>
                            <option value="1" ${requestScope.vip.v_type == 1 ? 'selected' : ''}>普通会员</option>
                            <option value="2" ${requestScope.vip.v_type == 2 ? 'selected' : ''}>初级会员</option>
                            <option value="3" ${requestScope.vip.v_type == 3 ? 'selected' : ''}>中级会员</option>
                            <option value="4" ${requestScope.vip.v_type == 4 ? 'selected' : ''}>高级会员</option>
                            <option value="5" ${requestScope.vip.v_type == 5 ? 'selected' : ''}>至尊会员</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">开通时间</label>
                    <div class="layui-input-block">
                        <input type="date" name="startTime" value="${requestScope.vip.startTime}" required  autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">到期时间</label>
                    <div class="layui-input-block">
                        <input type="date" name="endTime" value="${requestScope.vip.endTime}" required autocomplete="off" class="layui-input"><span style="color: red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="submit" id="submit">立即提交</button>
                        <button class="layui-btn layui-btn-danger" type="button" onclick="clearForm()">清空内容</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script src="/static/admin/js/config.js"></script>
<script src="/static/admin/js/script.js"></script>
<script>
    function clearForm() {
        // 清空输入框
        $('input[type="text"]').val('');
        // 重置选择框
        $('select').val('');
        // 清空日期选择器
        $('input[type="date"]').val('');
        // 取消选中单选框
        $('input[type="radio"]').prop('checked', false);
    }
</script>
</body>
</html>
